<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欠费报表</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style>
</style>
<body>
<div class="demoTable">
    搜索姓名：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>

    <button class="layui-btn" data-type="reload" id="searchBtn">搜索</button>
    <button class="layui-btn"  id="charge">收费</button>
</div>
<div style="display: none;padding: 20px" id="pay" >
    <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">房间编号:</label>
                <div class="layui-input-inline">

                    <input type="text" name="roomno" lay-verify="required"  id="roomno"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户姓名:</label>
                <div class="layui-input-inline">

                    <input type="text" name="clientname" lay-verify="required"  id="clientname"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">收费项目:</label>
                <div class="layui-input-inline">

                    <input type="text" name="payproject" lay-verify="required"  id="payproject"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">金额:</label>
                <div class="layui-input-inline">

                    <input type="text" name="assessment" lay-verify="required"  id="assessment"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <!--<div class="layui-inline">-->
                <!--<label class="layui-form-label">缴费时间</label>-->
                <!--<div class="layui-input-inline">-->
                    <!--<input type="date" name="collectdata" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">-->
                <!--</div>-->
            <!--</div>-->

            <div class="layui-form-item">
                <label class="layui-form-label">缴费方式</label>
                <div class="layui-input-block">
                    <select th:name="paymenttype" lay-filter="aihao">
                        <option value="现金">现金</option>
                        <option value="支付宝" selected="">支付宝</option>
                        <option value="微信">微信</option>

                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">收费员</label>
                <div class="layui-input-block">
                    <select th:name="tollgathere" lay-filter="aihao">
                        <option value="燕世亮">燕世亮</option>
                        <option value="燕世亮" selected="">郭梦迪</option>

                    </select>
                </div>
            </div>


        </div>
        <!--<div class="layui-form-item" style="text-align: center;">-->
            <!--<div class="layui-input-block" style=" margin-left:0px">-->
                <!--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">确认收费</button>-->
            <!--</div>-->
        <!--</div>-->
        <div style="margin-left: 210px">
            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="tijiao">确认收费</button>
        </div>
    </form>

</div>
<div  id="barDemo" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit">收费</a>
</div>
<table class="layui-hide" id="demo" lay-filter="demo"  ></table>
<script>
    layui.use(['form', 'laypage', 'layer','laydate', 'table','element'], function(){

        var laypage = layui.laypage
            , form = layui.form//分页
            ,layer = layui.layer //弹层
            ,table = layui.table
            ,laydate = layui.laydate
             ,element = layui.element
            ,$=layui.jquery;//表格


        //日期
        laydate.render({
            elem: '#date',
            trigger:'click'

    });

        //监听提交
        form.on('submit(tijiao)', function(data){
            //data.field表单所有信息
            $.post("ycharge",data.field,function(result)
                {
                    if(result.data==false){
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        })

                    }
                    else {
                        layer.msg(result.msg, {
                                icon: 1,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            },

                            function () {
                                //刷新父页面
                                parent.window.location.reload();
                            });
                    }
                }
            );
            return false;
        });
        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,height:500
            ,url: 'selArea' //数据接口
            ,title: '欠费报表'
            ,page: true //开启分页
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板
            ,totalRow: true //开启合计行
            ,limits:[1,3,5]
            ,cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'buildingname', title: '楼宇'}
                    ,{field: 'roomno', title: '房间编号'}
                    ,{field: 'clientname', title: '客户姓名'}
                    ,{field: 'roomArea', title: '房间面积'}
                    ,{field: 'phone', title: '手机号码'}
                    ,{field: 'endtime', title: '截止时间'}
                    ,{field: 'payproject', title: '缴费项目'}
                    ,{field: 'practical', title: '使用量'}
                    ,{field: 'price', title: '单价'}
                    ,{field: 'assessment', title: '应缴金额',totalRow: true, totalRowText: '合计：'}
                    ,{field: 'remark', title: '备注'}
                    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
                ]
            ]
            , id: 'selArea'
        });
        //分页
        laypage.render({

            elem: 'pageDemo' //分页容器的id
            ,count: 100 //总页数
            ,skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                }
            }
        });
        //执行条件查询
        /*条件查询按钮*/
        var $ = layui.$;
        $('#searchBtn').on('click', function(){
            //获取输入框
            var demoReload = $('#demoReload');
            //执行重载
            table.reload('selArea', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    clientname: demoReload.val()
                }
            });
        });

        //监听行工具事件
        table.on('tool(demo)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
              if(layEvent === 'edit'){ //编辑
                edit(data);
            }
        });
        //打开修改页面
        function edit(data){
            layer.open({
                type:1,
                title:'收费',
                content:$("#pay"),
                area:['420px','400px'],
                success:function(index){
                    $("#roomno").val(data.roomno);
                    $("#clientname").val(data.clientname);
                    $("#payproject").val(data.payproject);
                    $("#assessment").val(data.assessment);
                }
            });
        }

    });
</script>
</body>
</html>